<template>
    <view class="container">

        <view class="tab">
            <view class="tab-inner">
                <view class="tab-item" @click="tabTap(index)" v-for="(item,index) in tabArr" :class="{active:currentIndex==index}">{{item}}</view>
            </view>
        </view>

        <view class="todo-main main">
            <view class="down-container">
                <view v-if="toNoData">
                    <noData noDataHeight="300px"></noData>
                </view>
                <view v-else>
                    <view class="top-item" v-for="item in todoList" :data-todoid="item.TodoID" :data-clueid="item.ClueID">
                        <view class="title">
                            <view class="left">{{item.PlateNo}}<text>{{item.TodoDate}}</text></view>
                            <view class="right">
                                <!-- <view class="icon iconfont iconunfold"></view> -->
                            </view>
                        </view>

                        <view class="top-detail">
                            <view class="top-inner">
                                <view class="inner-left">
                                     <view class="top-item-text">姓名：{{item.UserName}}</view>
                                     <view class="top-item-text">线索类型：{{item.ClueTypeName}}</view>
                                    <view class="top-item-text">品牌车型：{{item.Brand}}{{item.Model}}</view>
                                    <view class="top-item-text">保险到期时间：{{item.EndDate}}</view>
                                    <view class="top-item-text">上次沟通时间：{{item.CreateDate}}</view>
                                </view>
                                <view class="inner-right">
                                    <view class="inner-right-text">{{item.PurchaseStep}}</view>
                                    <view class="inner-right-text status">{{item.FlowStep}}</view>
                                    <view class="inner-right-text status">{{item.IsRead}}</view>
                                </view>
                            </view>
                            <view class="footer-text">{{item.Comment}}</view>

                            <view class="top-footer">
                                <view class="footer-item" :data-mobile="item.Mobile" :data-clueid="item.ClueID" @click="cMakeCall">
                                    <text class="icon iconfont icondianhua"></text>
                                    <text class="icon-text">外呼</text>
                                </view>
                                <view class="footer-item" @click="isShowEditTap" :data-todoid="item.TodoID"
                                    :data-clueid="item.ClueID">
                                    <text class="icon iconfont iconsettingsfill"></text>
                                    <text class="icon-text">设置</text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="load-more" v-if="isShowMore">
                        <uni-load-more iconType="circle" :status="status" />
                    </view>
                </view>
            </view>
        </view>

        <!-- 设置 -->
        <edit :isShowEdit="isShowEdit" :editTitle="editTitle" @evenHideEdit="isHideEditTap" @evenEditConfirm="confirm"
            :editType="editType" :todoId="todoId" :clueId="clueId"></edit>


    </view>
</template>

<script>
    import util from '@/utils/util.js';
    import {
        addToDo,
        toDoList,
        bindTel
    } from '@/utils/api.js';
    import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
    import noData from '@/components/noData/noData.vue';
    import edit from '@/components/edit/edit.vue';

    export default {
        components: {
            noData,
            uniLoadMore,
            edit
        },
        data() {
            return {
                purchaseStepArr: ['全部', '低', '中', '高'], //线索意愿等级
                flowStepArr: ['待跟进', '跟进中', '成交', '战败'], //线索状态

                isShowEdit: false,
                editTitle: '', //编辑title
                editType: null, //设置的类型   todo 代办  clue  线索
                todoId: null, //代办id
                clueId: null, //线索id

                toNoData: false, //待办暂无数据
                todoList: [], //待办数据
                toDoPageIndex: 1, //待办页码
                toDopageSize: 10, //待办数据条数
                isShowMore: false,
                status: 'loading',
                tabArr: ['今日', '昨日', '明日', '全部'],
                currentIndex: 0, //默认今天
                tabDate: util.formatDate(new Date(), 'yyyy-MM-dd'), //切换日期 默认今天
            }
        },
        onLoad() {},
        onShow() {
            if (this.todoList.length < 1) {
                uni.startPullDownRefresh();
            }
        },
        //上拉加载
        onReachBottom() {
            this.isShowMore = true;
            this.toDoPageIndex++;
            this.getToDoList();
        },
        //下拉刷新
        onPullDownRefresh() {
            this.toDoPageIndex = 1;
            this.getToDoList();
            setTimeout(function() {
                uni.stopPullDownRefresh();
            }, 2000);
        },
        methods: {
            //tabq切换
            tabTap(index) {
                this.currentIndex = index;
                this.toDoPageIndex = 1;
                switch (index) {
                    case 0:
                        this.tabDate = util.getDateStr(0); //今天
                        break;
                    case 1:
                        this.tabDate = util.getDateStr(-1); //昨天
                        break;
                    case 2:
                        this.tabDate = util.getDateStr(1); //明天
                        break;
                    case 3:
                        this.tabDate = ''; //全部
                        break;
                }
                uni.startPullDownRefresh();
            },
            //获取待办
            getToDoList() {
                let self = this;
                util.safeRquest().then(function(userId) {
                    let info = {
                        UserID: userId,
                        IsRead: -1,
                        TodoDate: self.tabDate,
                        PageSize: self.toDopageSize,
                        PageIndex: self.toDoPageIndex
                    };
                    toDoList(info).then(function(res) {
                        //如果在开始就清空数组，页面会有空白期，所以放到相应
                        if (self.toDoPageIndex == 1) {
                            self.todoList = [];
                        }
                        console.log(info)
                        self.status = 'loading';
                        let rdata = res.data;
                        if (rdata.status == 0 && rdata.data.total > 0) {
                            let list = rdata.data.rows;
                            console.log(JSON.stringify(list))
                            list.map(function(item, index) {
                                //标记的时间
                                item.TodoDate = util.formatDate(item.TodoDate, 'hh:mm');
                                //保险到期时间
                                item.EndDate = util.formatDate(item.EndDate, 'yyyy-MM-dd');
                                //上次沟通时间
                                item.CreateDate = util.formatDate(item.CreateDate, 'yyyy-MM-dd');
                                //线索意愿等级
                                item.PurchaseStep = self.purchaseStepArr[item.PurchaseStep];
                                //线索跟进状态
                                item.FlowStep = self.flowStepArr[item.FlowStep];
                                //是否已处理
                                item.IsRead = item.IsRead == 0 ? '未处理' : '已处理';
                            });
                            self.todoList = self.todoList.concat(list);

                            if (list.length < self.toDopageSize) { //没有更多了
                                self.status = 'noMore';
                            } else {
                                setTimeout(function() {
                                    self.isShowMore = false;
                                }, 1500);
                            }
                            self.toNoData = false;
                        } else {
                            self.toNoData = true;
                            self.isShowMore = false;
                        }

                        uni.stopPullDownRefresh();
                    }).catch(function(err) {
                        self.toNoData = true;
                        self.isShowMore = false;

                        uni.stopPullDownRefresh();
                        uni.showToast({
                            title: err.message,
                            icon: 'none'
                        })
                    })
                }).catch(function() {
                    self.toNoData = true;
                    self.isShowMore = false;
                })

            },
            //显示设置
            isShowEditTap(e) {
                let ds = e.currentTarget.dataset;
                console.log(ds)
                this.editType = 'todo'; //设置的类型   todo 代办  clue  线索
                this.todoId = ds.todoid; //当前被选中的id
                this.clueId = ds.clueid; //当前被选中的id
                this.isShowEdit = true;
                this.editTitle = "待办设置";

            },
            //隐藏设置
            isHideEditTap() {
                this.isShowEdit = false;
            },
            //线索设置提交
            confirm(info) {
                let self = this;
                console.log(info)
                if (!!info) {
                    self.isHideEditTap();
                    addToDo(info).then(function(res) {
                        let rdata = res.data;
                        if (rdata.status == 0 && rdata.data) {
                            uni.showToast({
                                title: '设置成功'
                            })
                            self.getToDoList();
                        } else {
                            uni.showToast({
                                title: '设置失败',
                                icon: 'none'
                            })
                        }
                    }).catch(function(err) {
                        uni.showToast({
                            title: err.message,
                            icon: 'none'
                        })
                    })
                }

            },
            //外呼
            cMakeCall(e) {
                let ds = e.currentTarget.dataset;
                console.log(ds)
                let mobiles = [];
                let mobile = ds.mobile; //当前被选中的id
                let clueId = ds.clueid; //当前被选中的id
                if (util.isMoile(mobile)) {
                    mobiles.push(mobile);
                }

                util.safeRquest().then(function(userId) {
                    let info = {
                        UserID: userId,
                        ClueID: clueId
                    };
                    console.log(info)
                    bindTel(info).then(function(res) {
                        let rdata = res.data;
                        if (rdata.status == 0) {
                            if (rdata.data.code == '0') {
                                mobiles.push(rdata.data.data.telX);
                            }
                        }
                        if (mobiles.length = 1) {
                            uni.makePhoneCall({
                                phoneNumber: mobiles[0]
                            })
                        } else if (mobiles.length == 2) {
                            uni.showActionSheet({
                                itemList: mobiles,
                                success: function(res) {
                                    uni.makePhoneCall({
                                        phoneNumber: mobiles[res.tapIndex]
                                    });
                                },
                            })
                        } else {
                            uni.showToast({
                                title: '电话拨号失败,请稍后重试',
                                icon: 'none'
                            });
                        }
                    });
                });

            },
        }
    }
</script>

<style>
    .tab {
        position: fixed;
        left: 0;
        top: 0;
        box-sizing: border-box;
        width: 100%;
        height: 120upx;
        padding: 20upx 30upx;
        background-color: #f1f1f1;
        z-index: 1;
    }

    .tab .tab-inner {
        box-sizing: border-box;
        width: 100%;
        display: flex;
        align-items: center;
        border: 1px solid #3c67c2;
        border-radius: 10upx;
        overflow: hidden;
        background-color: #fff;
    }

    .tab .tab-item {
        flex: 1;
        font-size: 28upx;
        text-align: center;
        height: 80upx;
        line-height: 80upx;
        color: #666;
        border-right: 1px solid #3c67c2;
    }

    .tab .tab-item.active {
        background-color: #3c67c2;
        color: #fff;
    }

    .tab .tab-item:last-child {
        border-right: none;
    }

    page {
        background-color: #f1f1f1;
    }

    .todo-main {
        padding-top: 110upx;
    }
</style>
